<%--
  Created by IntelliJ IDEA.
  User: 11965
  Date: 2020/9/10
  Time: 9:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@include file="../header.jsp"%>

<c:if test="${requestScope.deleteFlag > 0}">
    <script>
        alert("删除成功")
    </script>
</c:if>
<c:if test="${requestScope.deleteFlag == 0}">
    <script>
        alert("删除失败")
    </script>
</c:if>


<c:if test="${requestScope.updateFlag > 0}">
    <script>
        alert("修改成功")
    </script>
</c:if>
<c:if test="${requestScope.updateFlag == 0}">
    <script>
        alert("修改失败")
    </script>
</c:if>
<div class="right">
    <div class="location">
        <strong>你现在所在的位置是:</strong>
        <span>用户管理页面</span>
    </div>
    <div class="search">
            <span>用户名：</span>
            <input id="name" class="input-text"	type="text" value="">

            <span>用户角色：</span>
            <select id="userRole">

                <option value="0">--请选择--</option>


            </select>
            <input	value="查 询" type="submit" id="searchbutton">
            <a href="toUserAdd" >添加用户</a>
    </div>
    <!--用户-->
    <table class="providerTable" cellpadding="0" cellspacing="0">
        <tr class="firstTr">
            <th width="10%">用户编码</th>
            <th width="20%">用户名称</th>
            <th width="10%">性别</th>
            <th width="10%">生日</th>
            <th width="10%">电话</th>
            <th width="10%">用户角色</th>
            <th width="30%">操作</th>
        </tr>


    </table>
    <div class="page-bar">
        <ul class="page-num-ul clearfix">
            <li>共<span id="totalCount"></span>条记录&nbsp;&nbsp; <span id="currentPage"></span>/<span id="totalPage"></span>页</li>

            <a href="javascript:void(0)" class="first">首页</a>
            <a href="javascript:void(0)" class="prev">上一页</a>


            <a href="javascript:void(0)" class="next">下一页</a>
            <a href="javascript:void(0)" class="last">最后一页</a>

            &nbsp;&nbsp;
        </ul>
        <span class="page-go-form"><label>跳转至</label>
	     <input type="text" name="inputPage" id="inputPage" class="page-key" />页
	     <button type="button" class="page-btn" onClick=''>GO</button>
		</span>
    </div>

</div>
</section>

<!--点击删除按钮后弹出的页面-->
<div class="zhezhao"></div>
<div class="remove" id="removeUse">
    <div class="removerChid">
        <h2>提示</h2>
        <div class="removeMain">
            <p>你确定要删除该用户吗？</p>
            <a href="#" id="yes">确定</a>
            <a href="javascript:void(0)" id="no">取消</a>
        </div>
    </div>
</div>

<script>

    var currentPage = 1;

    $(function(){
        bindRole()
        bindUser(currentPage)
        bindEvent();
    })

    //绑定角色列表下拉框
    function bindRole(){
        //ajax请求 type=post
        //第一个参数为请求地址
        //第二个参数为请求的参数列表 （有则写，没有不写）
        //第三个参数 请求成功的回调函数
        //第四个参数为 响应数据类型 json
        $.post("/listRole",function(msg){
            var str = "";
            $(msg).each(function (i) {
                var r = msg[i];
                str += "<option value='"+r.id+"'>"
                str += r.rolename
                str += "</option>"
            })
            $("#userRole").append(str);
        },"json")
    }


    function bindUser(currentPage){
        //获取搜索条件值
        var name = $("#name").val();
        var userRole = $("#userRole").val();

        $.post("/listUser",{"name":name,"userRole":userRole,"currentPage":currentPage},function(msg){
            var str = ""
            $(msg.list).each(function(i){
                var u = msg.list[i];
                str += "<tr>"
                str += "<td>"
                str += "<span>"+u.usercode+"</span>"
                str += "</td>"
                str += "<td>"
                str += "<span>"+u.username+"</span>"
                str += "</td>"
                str += "<td>"
                str += "<span>"
                str += u.gender == 1 ? "男" : "女"
                str += "</span>"
                str += "</td>"
                str += "<td>"
                str += "<span>"+u.birthday+"</span>"
                str += "</td>"
                str += "<td>"
                str += " <span>"+u.phone+"</span>"
                str += "</td>"
                str += "<td>"
                str += "<span>"+u.role.rolename+"</span>"
                str += " </td>"
                str += "<td>"
                str += '<span><a class="viewUser" href="javascript:;" data-id="'+u.id+'"><img src="/statics/images/read.png" alt="查看" title="查看"/></a></span>'
                str += '<span><a class="modifyUser" href="javascript:;" data-id="'+u.id+'"><img src="/statics/images/xiugai.png" alt="修改" title="修改"/></a></span>'
                str += '<span><a class="deleteUser" href="javascript:;" data-id="'+u.id+'"><img src="/statics/images/schu.png" alt="删除" title="删除"/></a></span>'
                str += "</td>"
                str += "</tr>"
            })
            $(".providerTable tr:not(:first)").remove();
            $(".providerTable").append(str);
            $("#currentPage").html(currentPage);
            $("#totalPage").html(msg.totalPage);
            $("#totalCount").html(msg.totalCount);

        },"json")
    }
    //事件绑定
    function bindEvent(){
        //查看用户
        $(".providerTable").delegate(".viewUser","click",function(){

            //data方法  获取data-属性的值
            var id = $(this).data("id");
            window.location = "userview/"+id;
        })


        var id;

        //删除用户
        $(".providerTable").delegate(".deleteUser","click",function(){
            $(".zhezhao,.remove").show()
            id = $(this).data("id");

        })

        //修改用户
        $(".providerTable").delegate(".modifyUser","click",function(){
            var id = $(this).data("id")
            window.location = "toUserModify/"+id
        })

        //点击yes
        $("#yes").click(function(){

            window.location = "userDelete/"+id
        })


        //点击no
        $("#no").click(function(){
            $(".zhezhao,.remove").hide()
        })
        //查询按钮点击
        $("#searchbutton").click(function(){
            currentPage = 1;
            bindUser(currentPage);
        })

        //首页
        $(".first").click(function(){
            currentPage = 1;
            bindUser(currentPage);
        })
        //上一页
        $(".prev").click(function(){
            if(currentPage == 1){
                return;
            }
            currentPage--;
            bindUser(currentPage);
        })
        //下一页
        $(".next").click(function(){
            if(currentPage == $("#totalPage").html()){
                return;
            }
            currentPage++;
            bindUser(currentPage);
        })

        //最后一页
        $(".last").click(function(){
            currentPage = parseInt($("#totalPage").html());
            bindUser(currentPage);
        })

        //跳转页按钮
        $(".page-btn").click(function(){
            var inputPage = $("#inputPage").val();
            if(isNaN(inputPage)){
                alert("请正确输入页码数")
                return;
            }
            if(parseInt(inputPage) < 1 || parseInt(inputPage) > parseInt($("#totalPage").html())){
                alert("请正确输入页码数")
                return;
            }
            currentPage = parseInt(inputPage);
            bindUser(currentPage);
        })
    }

    function formartDate(obj){
        var d = new Date();
        d.setTime(obj);
        var str = d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate();
        return str;
    }

</script>

<%@include file="../foot.jsp"%>